import React from 'react';

import * as BillBoardAction  from '../../actions/BillboardAction';
import { connect }  from 'react-redux';

import AssetGridCell from '../assets/AssetGridCell'

import Paging from '../Paging'

class BillboardSettingList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      activeData: {},
      currentType: ""
    }
  }

  componentDidMount() {
    this.$editModal = $(ReactDOM.findDOMNode(this.refs.BillboardSettingEdit))
    this.$assetModal = $(ReactDOM.findDOMNode(this.refs.MenuSettingAssetSelect))
    // console.log( this.props.type);
    // this.props.dispatch(
    //   BillBoardAction.loadBillboardAsync({
    //     type: this.props.type,
    //     limit:5
    //   })
    // )

  }

  componentDidUpdate(){
    var width = $('.Billboard-setting-list').width();
    var imgHeight = (width*0.29-30)*0.56;
    $('.cell-image').css("height", imgHeight + "px");
  }

  componentWillReceiveProps(props) {
    // if (props.type != this.state.currentType) {
    //   this.setState({
    //     currentType: props.type
    //   })
    //   this.props.dispatch(
    //     BillBoardAction.loadBillboardAsync({
    //       type: props.type,
    //       limit: 5
    //     })
    //   )
    // }
  }

  // onPageChange(page) {
  //   var self = this;
  //   this.props.dispatch(
  //     BillBoardAction.loadBillboardAsync({
  //       offset: (page-1)*this.props.limit,
  //       limit: self.props.limit,
  //       type: this.props.type
  //     })
  //   )
  // }

  onAssetEdit(event, data) {

  }

  onAssetDelete(event, data) {

  }

  renderList() {
    var self = this;

    var content = [];
    if (this.props.data && this.props.data.length > 0) {
      this.props.data.forEach(function(data, index) {
        var assetContent = data.content;
        var contentObj = JSON.parse(assetContent)
        // console.log(contentObj.news_item[0]);
        var news = contentObj.news_item[0];
        var date = new Date(data.created_at);
        var dateFormat = date.getFullYear() + '年' + (date.getMonth()+1) + '月' + date.getDate() + '日'
        var assetData = {
          title: news.title,
          image: news.thumb_url,
          digest: news.digest,
          thumb_media_id: news.thumb_media_id,
          created_at: dateFormat
        }
        content.push((

          <AssetGridCell
            news = {data}
            data={assetData}
            onAssetEdit = {self.props.onBillboardUpdate}
            onAssetDelete = {self.props.onBillboardDelete}
          />

        ))
      })
    }

    return content
  }

  render() {
    var self = this;
    // var data = this.props.data;
    var offset = parseInt(this.props.offset),
        limit = parseInt(this.props.limit),
        count = parseInt(this.props.count)
    var current = Math.ceil(offset/limit) + 1;
    return(
      <div className="Billboard-setting-list setting-list ">
        <table className="table row">

          <tbody>
            {this.renderList()}

          </tbody>
        </table>

      </div>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    billboard: state.billboard,
    data: state.billboard.data,
    offset: state.billboard.offset,
    limit: state.billboard.limit,
    count: state.billboard.count
  }
}

export default BillboardSettingList
